<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>房产验证码绑定</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="box topnext">
			<view class="box1">
				<view class="box1-1">
					<view class="" style="width: 640rpx;">
						<input type="tel" v-model="code" placeholder="点击输入房产验证码">
					</view>

					<image class="box1-1imgpp" @click="scan" src="https://x.bilinmeiju.com/static/myfangchan/sys.png" mode=""></image>
				</view>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						您的身份
					</view>
					<picker mode="selector" range-key="title" :range="shenfenlist" :value="shenfen" @change="setshenfen">
						<view class="uni-input">{{formatshenfen}}</view>
					</picker>
					<image class="box1-1img" src="https://x.bilinmeiju.com/static/my/yjt.png" mode=""></image>
				</view>
			</view>

			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">
						姓名
					</view>
					<input class="uni-input" type="text" v-model="name" placeholder="点击输入真实姓名">
				</view>
			</view>


		</view>
		<view class="textcc">
			您可以点击右侧扫描房产二维码或者手动输入验证码进行绑定
		</view>
		<view class="bottom" @click="add()">
			提交绑定
		</view>

	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				CustomBar: 0,
				topheight: 0,
				shenfenlist:[
					{title:'租客',value:2},
					{title:'家属',value:3}
				],
				shenfen:0,
				formatshenfen:'请选择您的绑定身份',
				shenfenval:'',//ok
				code:'',
				name:'',
				bartop:0
			}
		},
		onLoad(options) {
			that = this;
			this.bartop = this.$bartop
			if(options.code) this.qrcodeinfo(options.code)
		},
		methods: {
			add(){
				if(!this.code){
					uni.showToast({
						title:'请扫描或输入验证码',
						icon:'none'
					})
					return false;
				}
				if(!this.name){
					uni.showToast({
						title:'请输入真实姓名',
						icon:'error'
					})
					return false;
				}
				var shenfen = this.shenfenval;
				that.$post('center/bindroom',{code:that.code,shenfen:shenfen,name:that.name,type:2}).then(res=>{
					if(res.code===0){
						uni.showModal({
							title:'绑定提示',
							content:res.msg,
							showCancel:false,
							success() {
								uni.navigateBack();
							}
						})
					}
				})
			},
			setshenfen(e){
				var index = e.detail.value*1;
				var shenfenlist = this.shenfenlist;
				this.formatshenfen = shenfenlist[index].title;
				this.shenfenval = shenfenlist[index].value;
			},
			scan(){
				uni.scanCode({
					success(res) {
						if(res.path){
							var qid = '';
							var path = res.path;
							path = path.split('scene=');
							path = path[1];
							qid = path.replaceAll('q_','');
							this.qrcodeinfo(qid)
						}else{
							uni.showToast({
								title:'请扫描正确的房产推荐码'
							})
						}
					}
				})
			},
			qrcodeinfo(qid){
				that.$post('center/qrcodeinfo',{id:qid}).then(res=>{
					that.code = res.data.code;
					var msg = res.msg;
					if(!that.code){
						that.$post('api/qrcodeinfo',{id:qid}).then(res2=>{
						
							that.code = res2.data.code;
							var msg = res2.msg;
						})
					}
					if(that.code){
						uni.showToast({
							title:msg
						})
					}
					
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.box1-1imgpp {
		width: 30rpx;
		height: 30rpx;
	}


	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.box {
		width: 700rpx;
		background-color: #ffffff;
		margin: 0 auto;
	}

	.box1 {
		width: 650rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 0rpx auto;
	}

	.box11 {
		width: 650rpx;
		height: 150rpx;
		display: flex;
		margin: 0rpx auto;
	}

	.uni-input {
		width: 500rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.uni-inputss {
		display: flex;
		align-items: center;
	}

	.uni-bg {
		display: flex;
	}

	.uni-bg-reddui {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.uni-inputcc {
		width: 300rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.box1-1 {
		/* margin-top: 20rpx; */
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.box1-1text {
		width: 150rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box1-1img {
		width: 10rpx;
		height: 20rpx;
	}

	.yzm {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FE7B00;
	}

	.textcc {
		margin-left: 50rpx;
		margin-top: 10rpx;
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.bottom {
		margin-top: 30rpx;
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		width: 700rpx;
		height: 100rpx;
		margin-left: 25rpx;
		background-color: rgb(255, 174, 69);
		border-radius: 50rpx;
	}

	.xiangji {
		width: 170rpx;
		height: 117rpx;
		margin-left: 20rpx;
	}

	.xtext {
		font-size: 14rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.txh {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
